<template>
  <div>
        <ul class="clearfloat nav">
              <li v-bind:index='0' @click="getArticles" v-bind:class="{active:isnav[0]}">文章收藏 <span>{{collectionNumber.collectionArticles}}</span></li>
              <li v-bind:index='1'  @click="getWorks" v-bind:class="{active:isnav[1]}">作品收藏<span>{{collectionNumber.collectionWorks}}</span></li>
              <li v-bind:index='2' @click="getQuestions" v-bind:class="{active:isnav[2]}">问答收藏<span>{{collectionNumber.collectionQuestions}}</span></li>
        </ul>
        <div class="article" v-if="isnav[0]">
            <div class="empty" v-if="!articles.length">
                <i class="iconfont">&#xe68e;</i>
                <p>您暂无收藏文章</p>
            </div>
            <div class="list" v-for="article in articles">
                  
                  <div class="clearfloat">
                      <router-link v-bind:to="'/articleDetail/'+article.Id" tag="h3" class="fl">
                          {{article.articleId.articleTitle}}
                      </router-link>
                       <span class="fr iconfont del" v-bind:articleId="article.Id" @click="delCollectionArticleFun">&#xe632;</span>
                  </div>
                  <ul class="clearfloat">
                        <li>
                            {{article.articleId.articleClass}}
                        </li>
                        <li>{{article.createdAt|filterDate}}</li>
                        <li><i class="iconfont">&#xe6e4;</i>{{article.articleId.readers}}</li>
                  </ul>
            </div>
        </div>
        <div class="work clearfloat" v-if="isnav[1]">
            <div class="empty" v-if="!works.length">
                <i class="iconfont">&#xe639;</i>
                <p>您暂无收藏作品</p>
            </div>
            <div class="work_list clearfloat" v-for="work in works">
                <div class="img">
                    <router-link v-bind:to="'/design/designDetail/'+work.workId._id">
                      <img v-bind:src="'/api/works/'+work.workId.workCover" alt="">
                    </router-link>
                </div>
                <h5>{{work.workId.workTitle}}</h5>
                <ul class="clearfloat">
                    <li>
                        <i class="iconfont">&#xe6e4;</i>{{work.workId.readers}}
                    </li>
                    <li>
                        <i class="iconfont">&#xe707;</i>{{work.workId.giveLikes.length}}
                    </li>
                    <li>
                        <i class="iconfont">&#xe6ea;</i>{{work.workId.giveLikes.length}}
                    </li>
                </ul>
                <div class="cd">
                    <span class="iconfont" v-bind:workId="work.Id" @click="delCollectionWorkFun">&#xe632;</span>
                    <span class="fr">{{work.createdAt|filterDate}}</span>
                </div>
            </div>
        </div>
        <div class="article" v-if="isnav[2]">
          <div class="empty" v-if="!questions.length">
                <i class="iconfont">&#xe630;</i>
                <p>您暂无收藏问答</p>
            </div>
            <div class="list" v-for="question in questions">
                  <div class="clearfloat">
                       <router-link v-bind:to="'/question/questionDetail/'+question.Id" class="fl">{{question.questionId.questionTitle}}</router-link>
                       <span class="fr iconfont del" v-bind:questionId="question.Id" @click="delCollectionQuestionFun">&#xe632;</span>
                  </div>
                  <ul class="clearfloat">
                        <li>
                            {{question.questionId.questionLabel}}
                        </li>
                        <li>{{question.createdAt|filterDate}}</li>
                  </ul>
            </div>
        </div>
  </div>
</template>
<script>
import axios from 'axios'
import dataformat from "../../assets/js/dateformat.js"
    export default{
      data(){
        return{
          isnav:[true,false,false],
          articles:[],
          works:[],
          questions:[],
          collectionNumber:{}
        }
      },
      created:function(){
         this.getArticlesList();
         var that = this;
          this.getCollectionNumber();
      },
      
      methods:{
        // 获取文章收藏
        getArticles:function(e){
          this.selectionFun(e);
          this.getArticlesList();
        },
        // 获取收藏分类的数量
        getCollectionNumber:function(){
          var that = this;
          axios.get('/api/personal/getColleticonNumber',{
            params:{
              userId:that.$store.state.userId
            }
          }).then(function(res){
            that.collectionNumber = res.data;
          })
        },
        // 获取文章收藏数据
        getArticlesList:function(){
          var that = this;
          axios.get('/api/personal/getCollectionArticles',{
            params:{
              _id:that.$store.state.userId
            }
          }).then(function(res){
            that.articles = res.data.collectionArticles;
          });
        },
        // 获取收藏的作品
        getWorks:function(e){
          if(e){
            this.selectionFun(e);
          }
          var that = this;
          axios.get('/api/personal/getCollectionWorks',{
            params:{
              _id:that.$store.state.userId
            }
          }).then(function(res){
            that.works = res.data.collectionWorks;
          });
        },
        // 获取收藏的问题
        getQuestions:function(e){
          if(e){
            this.selectionFun(e);
          }
          var that = this;
          axios.get('/api/personal/getCollectionQuestions',{
            params:{
              _id:that.$store.state.userId
            }
          }).then(function(res){
            that.questions = res.data.collectionQuestions;
          });
      },
      // 按钮选中函数
        selectionFun:function(e){
          for(var i=0; i<this.isnav.length; i++){
            this.$set(this.isnav,i,false);
          }
          var index  = e.target.getAttribute('index');
          this.$set(this.isnav,index,true);
        },
        // 删除收藏的文章
        delCollectionArticleFun:function(e){
          var index  = e.target.getAttribute('articleId');
          this.delFun('/api/article/delCollection',index,this.getArticlesList,this);
        },
        // 删除收藏的作品
        delCollectionWorkFun:function(e){
          var index  = e.target.getAttribute('workId');
          this.delFun('/api/work/delCollection',index,this.getWorks,this);
        },
        // 删除收藏的问答
        delCollectionQuestionFun:function(e){
          var index  = e.target.getAttribute('questionId');
          this.delFun('/api/question/delCollection',index,this.getQuestions,this);
        },
        // 删除api
        delFun:function(url,index,callback,a){
          var that = a;
          axios.get(url,{
            params:{
              articleId:index,
              userId:that.$store.state.userId
            }
          }).then(function(res){
            if(res.data.ok===1){
              alert('删除成功');
              callback();
              that.getCollectionNumber();
            }
          })
        }
    },
    filters:{
      filterDate:dataformat,
    }
  }
</script>
<style lang="scss" scoped>
.empty{
  height:250px;
  text-align: center;
  padding-top:100px;
  color:#c5c5c5;
  i{
    font-size:66px;
    color: #eeeeee;
  }
  p{
    margin-top:12px;
  }
}
ul{
  border:0px!important;
}
  .nav{
    margin-left:30px;
    margin-top:20px;
    li{
      font-size:14px;
      cursor: pointer;
      float:left;
      margin-right:60px;
      color:rgb(179, 179, 179);
      span{
        margin-left:10px;
      }
    }
  }
  .active{
    color:#007fff!important;
  }
  .article{
    padding:0px 30px;
    
    .list{
      padding-top:30px;
      padding-bottom:24px;
      border-bottom:1px solid #f5f5f5;
      >.clearfloat{
      line-height: 16px;
    }
    }
    
    h3{
      border-bottom:0px !important;
      white-space:nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
      font-weight: normal;
      font-size:17px;
      width:350px
    }
    .del{
      margin-right:60px;
      font-size:20px;
      color:#c5c5c5;
    }
    .del:hover{
      color:#979797;
    }
    ul{
      li{
        margin-top:16px;
        float:left;
        font-size:13px;
        color:#979797;
        margin-right:20px;
        line-height: 24px;
      }
      li:before{
        content:'';
        display: inline-block;
        width:2px;
        height:2px;
        border-radius: 50%;
        margin-right:16px;
        margin-bottom:3px;
        background: #979797;
      }
      li:nth-child(1):before{
        display: none;
      }
      li:nth-child(1){
        padding:0px 16px;
        color:#00b33b;
        background: #e5f7eb;
        font-size:12px;
      }
      li:nth-child(4){
        i{
          margin-right:6px;
        }
      }
    }
  }
  .work{
    padding:0px 10px;
  }
 .work_list{
    width:195px;
    float:left;
    margin:20px 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    .img{
      width:195px;
      height:120px;
      overflow: hidden;
      background: red;
      img{
        min-width:195px;
        min-height:120px;
        max-width:225px;
        max-height:150px;
      }
    }
    h5{
      line-height: 24px;
      padding-left:6px;
      margin-top:6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    ul{
      margin-left:6px;
      li{
        font-size:12px;
        margin-right:20px;
        float:left;
        padding-bottom:6px;
        line-height: 20px;
        color:rgb(197, 197, 197);
        span{
          margin-right:4px;
        }
      }
    }
    .cd{
      margin-top:10px;
      margin-bottom:10px;
      .iconfont{
          font-size:15px;
          padding-left:10px;
          color:rgb(204, 204, 204)
        }
        .iconfont:hover{
          color:#007fff;
        }
        .fr{
          font-size:12px;
          color:rgb(197, 197, 197);
          padding-right:10px;
        }
    }
  }
</style>
